<template>
  <div class="wb-main">
    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @search-change="searchChange"
      @selection-change="selectionChange"
      @on-load="getDataList"
    >
      <template slot="customerSearch" slot-scope="{row,size}">

        <el-select
          v-model="formData.customerId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <template>
          <el-button
            type="primary"
            icon="el-icon-check"
            size="small"
            @click="checkOrder(scope.row)"
          >审核</el-button>
        </template>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          @click="deleteHandle(scope.row.id)"
        >删除</el-button>

      </template>
    </avue-crud>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-date-picker
        v-model="checkFormData.shipDate"
        type="date"
        placeholder="选择日期"
      />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="checkDialog">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { tableOption } from '@/crud/order/order'
import orderApi from '@/api/order'
import { customerSearch } from '@/api/customer'
import { Debounce } from '@/utils/debounce'
export default {
  components: {

  },
  data() {
    return {
      formData: {
        customerId: ''
      },
      dataForm: {
        prodName: ''
      },
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataListSelections: [],
      dataListLoading: false,
      tableOption: tableOption,
      loading: false,
      options: [],
      dialogVisible: false,
      checkFormData: {
        orderId: null, // 订单id
        shipDate: null
      }

    }
  },
  methods: {
    formateDate(datetime) {
      // let  = "2019-11-06T16:00:00.000Z"
      function addDateZero(num) {
        return (num < 10 ? '0' + num : num)
      }
      const d = new Date(datetime)
      const formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate())
      return formatdatetime
    },

    // 获取数据列表
    getDataList(page, params, done) {
      this.dataListLoading = true
      console.log('params---->', params)

      let createTimeStart
      let createTimeEnd
      if (params && params.date && params.date.length > 0) {
        const date = params.date
        createTimeStart = this.formateDate(date[0])
        createTimeEnd = this.formateDate(date[1])
      }
      orderApi.orderPcPage(Object.assign(
        {
          createTimeStart,
          createTimeEnd,
          customerIds: this.formData.customerId,
          pageNum: page == null ? this.page.currentPage : page.currentPage,
          pageSize: page == null ? this.page.pageSize : page.pageSize
        },
        params
      )).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
        if (done) {
          done()
        }
      })
    },
    // 条件查询
    searchChange(params, done) {
      this.getDataList(this.page, params, done)
    },
    // 多选变化
    selectionChange(val) {
      this.dataListSelections = val
    },
    remoteMethod(queryString) {
      if (queryString) {
        this.loading = true
        customerSearch(queryString).then((res) => {
          const data = res.data

          this.loading = false
          this.options = data
        }).catch(() => {
          this.loading = false
        })
      }

    //  cb(results)
    },
    handleSelect(item) {
      // this.formData.customerId = item
      console.log('handleSelect-----xx--->', item)
    },
    checkOrder(id) {
      this.checkFormData.orderId = id
      this.dialogVisible = true
    },
    checkDialog() {
      const time = this.transformationTime(this.checkFormData.shipDate)
      this.checkFormData.shipDate = time
      orderApi.orderCheck(this.checkFormData).then(() => {
        this.$message.success('审核通过')
        this.page.currentPage = 1
        this.getDataList(this.page)
      })
    },
    transformationTime(time) {
      const date = new Date(time)
      const year = date.getFullYear()
      const month = (new Date().getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const str = year + '-' + month + '-' + day
      return str
    }

  }
}
</script>
